<template>
  <div v-show="$store.state.design.outlineShow" class="toolbox">
    <h3 class="tooltop ovtext">Text Outline
      <div class="closebtn" @click="cl" />
    </h3>
    <div class="toolboxmain">
      <p class="myp ovtext">Choose Outline Thichness</p>
      <slide :num="$store.state.design.textObj.strokewidth" @change1="change1" @change2="change2" />
      <p class="myp ovtext">Choose Outline Color</p>
      <div
        v-for="item in $store.state.design.pantoneData"
        :key="item.rgb"
        class="onepantone"
        :title="item.pantone"
        :style="{backgroundColor:'#'+item.rgb}"
        :class="{active:item.rgb===$store.state.design.textObj.stroke}"
        @mousedown="clickColor(item,'color')"
      >
        <div class="juanjiao" />
        <img class="gouxuan" src="/static/image/gouxuan.png" alt="choise">
      </div>
      <p class="latelyp ovtext">Recently Used Colors</p>
      <div
        v-for="item in $store.state.design.latelyColor"
        :key="item.pantone"
        class="onepantone"
        :title="item.pantone"
        :style="{backgroundColor:'#'+item.rgb}"
        :class="{active:item.rgb===$store.state.design.textObj.stroke}"
        @mousedown="clickColor(item,'lately')"
      >
        <div class="juanjiao" />
        <img class="gouxuan" src="/static/image/gouxuan.png" alt="choise">
      </div>
      <div class="addtextbtn" style="float: right;margin: 20px;" @click="cl">Done</div>
      <div class="addtextbtn dellinebtn" :class="{isdisabled:!$store.state.design.textObj.stroke}" style="float: right;margin: 20px 0;" @click="deleteOutLine">Delete</div>

    </div>
  </div>
</template>
<script>
import slide from './slide'; // 控制描边宽度组件
export default {
  components: { slide },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    change1(c) {
      myStore.commit('design/setTextObj', { key: 'strokewidth', value: c + '' });
    },
    change2() {
      if (this.$store.state.design.textObj.stroke !== '') {
        var myuri = encodeURIComponent(
          JSON.stringify(this.$store.state.design.textObj)
        );
        getFontPic(this.$store.state.design.textObj, function(url) {
          svgTool.changeImg(url, myuri);
        });
      }
    },
    clickColor(obj, type) {
      if (this.$store.state.design.textObj.stroke !== obj.rgb) {
        if (type === 'color') this.$store.commit('design/addLatelyColor', obj);
        this.$store.commit('design/setTextObj', { key: 'stroke', value: obj.rgb });
        this.$store.commit('design/setTextObj', {
          key: 'pantone2',
          value: obj.pantone
        });
        var myuri = encodeURIComponent(
          JSON.stringify(this.$store.state.design.textObj)
        );
        getFontPic(this.$store.state.design.textObj, function(url) {
          svgTool.changeImg(url, myuri);
        });
      }
    },
    cl() {
      this.$store.commit('design/setOutlineShow', false);
    },
    deleteOutLine() {
      if (this.$store.state.design.textObj.stroke) {
        this.$store.commit('design/setTextObj', { key: 'stroke', value: '' });
        this.$store.commit('design/setTextObj', { key: 'strokewidth', value: '0' });
        this.$store.commit('design/setTextObj', { key: 'pantone2', value: '' });
        var myuri = encodeURIComponent(
          JSON.stringify(this.$store.state.design.textObj)
        );
        getFontPic(this.$store.state.design.textObj, function(url) {
          svgTool.changeImg(url, myuri);
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.toolbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #fff;
    overflow: auto;
}
.dellinebtn:hover{
  color: #f00;
  border-color: #f00;
}
.dellinebtn.isdisabled{
  cursor: not-allowed;
  color: #666;
  border-color: #DBD9DA;
}
.addtextbtn{
  width: 150px;
  text-align: center;
  height: 37px;
  line-height: 37px;
  color: #666;
  border: 1px solid #DBD9DA;
  cursor: pointer;
  margin: 0 20px 0 auto;
  font-weight: 600;
}
.addtextbtn:hover{
  color: #339;
  border-color: #339;
}
.closebtn{
  float: right;
  cursor: pointer;
  width: 40px;
  height: 40px;
  background: url('/static/image/cl.png') no-repeat 10px 15px;
}
.closebtn:hover{
  background-image: url('/static/image/cl1.png');
}
.myp{
  text-indent: 10px;
}
.juanjiao{
  display: none;
  width: 0;
  height: 0;
  border-width:5px;
  border-style: solid;
  border-color: #fff;
  border-bottom-color: rgba(150,150,150,0.5);
  border-right-color: rgba(150,150,150,0.5);
}
.active .juanjiao{
  display: block;
}
.gouxuan{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  width: 18px;
  height: 14px;
  display: none;
}
.active .gouxuan{
  display: block;
}
.onepantone{
  float: left;
  width: 26px;
  height: 26px;
  cursor: pointer;
  position: relative;
  margin: 18px 0 0 21px;
  -webkit-box-shadow: 2px 2px 2px #eee;
          box-shadow: 2px 2px 2px #eee;
}
.onepantone:hover{
  -webkit-box-shadow: 2px 2px 2px #aaa;
          box-shadow: 2px 2px 2px #aaa;
}
.toolboxmain{
  height: calc(100% - 55px);
  overflow: auto;
}
.tooltop{
  padding-top: 5px;
  height: 50px;
  line-height: 50px;
  text-indent: 20px;
  font-weight: 700;
}
.latelyp{
  width: 100%;
  float: left;
  height: 30px;
  line-height: 30px;
  text-indent: 20px;
}
.ovtext{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
</style>
